<template>
  <div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        表单提交
      </div>

      <div class="layout-box-content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="el-form-01 width500"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="下拉区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择下拉区域">
              <el-option label="选择一" value="shanghai" />
              <el-option label="选择二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择日期">
            <el-date-picker
              v-model="ruleForm.data1"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="开关" prop="delivery">
            <el-switch v-model="ruleForm.delivery" />
          </el-form-item>
          <el-form-item label="多选" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="北京" name="type" />
              <el-checkbox label="上海" name="type" />
              <el-checkbox label="河北" name="type" />
              <el-checkbox label="天津" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="单选" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="tree" />
              <el-radio label="false" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文本框" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item class="block">
            <el-button
              type="cyan"
              size="mini"
              @click="submitForm('ruleForm')"
            >提交</el-button>
            <el-button
              size="mini"
              @click="resetForm('ruleForm')"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        表单搜索01
      </div>

      <div class="layout-box-content">
        <el-form
          ref="formParams"
          class="el-form-01"
          :model="formParams"
          :inline="true"
        >
          <el-form-item prop="title" label="输入框" :rules="$validator.must">
            <el-input
              v-model="formParams.title"
              placeholder="输入框"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item prop="compType" label="下拉框" :rules="$validator.must">
            <my-select
              v-model="formParams.compType"
              clearable
              :dict-type="'compTypeList'"
              class="my-select"
            >
              <el-option label="全部" value="" />
            </my-select>
          </el-form-item>

          <el-form-item prop="persion" label="日期" :rules="$validator.must">
            <el-date-picker
              v-model="formParams.updateTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="cyan"
              size="mini"
              @click="handleSubmit('formParams')"
            >搜索</el-button>
            <el-button size="mini" @click="resetEvent">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        表单搜索02(临时处理)
      </div>

      <div class="layout-box-content">
        <el-form
          ref="formParams"
          style="margin: 0 auto"
          class="el-form-01 width700"
          :model="formParams"
          :inline="true"
        >
          <el-form-item
            prop="title"
            label="输入框"
            :rules="$validator.must"
            label-width="120px"
          >
            <el-input
              v-model="formParams.title"
              placeholder="输入框"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item
            prop="compType"
            label="下拉框"
            :rules="$validator.must"
            label-width="120px"
          >
            <my-select
              v-model="formParams.compType"
              clearable
              :dict-type="'compTypeList'"
              class="my-select"
            >
              <el-option label="全部" value="" />
            </my-select>
          </el-form-item>

          <el-form-item class="block">
            <div style="margin-left: 237px">
              <el-button
                type="cyan"
                size="mini"
                @click="handleSubmit('formParams')"
              >搜索</el-button>
              <el-button size="mini" @click="resetEvent">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Form01',
  props: {},
  data() {
    return {
      formParams: {
        title: '',
        compType: '',
        radios: 1,
        checkedBox: [],
        textarea: '',
        updateTime: []
      },
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择下拉区域', trigger: 'change' }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个',
            trigger: 'change'
          }
        ],
        resource: [{ required: true, message: '请选择', trigger: 'change' }],
        desc: [{ required: true, message: '请填写内容', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    handleSubmit(form) {
      // 提交表单前校验
      this.$refs[form].validate((valid) => {
        if (!valid) return
        this.postData()
      })
    },
    postData() {
      // 表单提交
    },
    resetEvent() {
      // 重置表单
      this.$refs['formParams'].resetFields()
      this.$set(this.formParams, 'title', '')
      this.$set(this.formParams, 'updateTime', [])
      this.$set(this.formParams, 'checkedBox', [])
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
